<template>
    <div class="search-box-pax">
        <div class="lower-icon" @click="showSelectFun">
            <i
                :class="
                    is_select_show_list
                        ? 'el-icon-arrow-up'
                        : ' el-icon-arrow-down'
                "
            ></i>
        </div>
        <div class="input-box">
            <input
                v-model="searchform.search_kw"
                :placeholder="`请输入${
                    searchform.search_type == 1 ? '客户' : '服务'
                }名称`"
                placeholder-class="input-placeholder"
            />
        </div>
        <div class="lower-icon" @click="searchFun">
            <i :class="is_focus ? 'el-icon-error' : 'el-icon-search'"></i>
        </div>
        <div
            class="list-select"
            :class="!is_select_show_list ? 'list-acitve' : ''"
            :style="{
                backgroundColor: is_select_show_list
                    ? 'rgba(0, 0, 0, 0.4)'
                    : 'rgba(0, 0, 0, 0)',
                left: !isExpand ? 72 + 'px' : 240 + 'px',
            }"
            @click="is_select_show_list = !is_select_show_list"
        >
            <div
                class="list-box"
                :style="{ top: is_select_show_list ? '0' : '-100px' }"
            >
                <div
                    class="list-row"
                    :class="item.is_acitve ? 'acitve' : ''"
                    v-for="item in search_type_data"
                    :key="item.id"
                    @click="cheSelectvalue(item.id)"
                >
                    {{ item.name }}
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { mapGetters } from "vuex";

export default {
    props: ["searchform", "search_type_data"],
    computed: {
        ...mapGetters(["isExpand"]),
    },
    data() {
        return {
            is_select_show_list: false,
            is_focus: false,
        };
    },

    methods: {
        showSelectFun() {
            this.is_select_show_list = !this.is_select_show_list;
            this.$emit("showSelectFun");
        },
        searchFun() {
            this.$emit("searchFun");
        },
        cheSelectvalue(id) {
            this.$emit("cheSelectvalue", id);
        },
    },
};
</script>
<style lang="scss" scoped>
.search-box-pax {
    display: flex;
    align-items: center;
    background: #f8f8f8;
    width: 90%;
    border-radius: 30px;
    padding: 0 10px;
    position: absolute;
    left: 7px;
    top: -95px;
    .input-box {
        width: calc(100% - 56px);
        margin-left: 5px;
        input {
            font-size: 14px;
        }
    }
    .lower-icon {
        font-size: 24px;
        cursor: pointer;
        color: #999;
        &:hover {
            color: #217cf9;
        }
    }
    .list-select {
        width: 345px;
        height: 100%;
        position: fixed;
        left: 240px;
        top: 100px;
        z-index: 1000;
        transition: background 0.3s;
        overflow: hidden;
        &.list-acitve {
            pointer-events: none;
        }
        .list-box {
            width: 100%;
            transition: all 0.3s;
            background: #f8f8f8;
            position: absolute;
            left: 0;
            top: 0;
            .list-row {
                cursor: pointer;
                font-size: 15px;
                padding-left: 20px;
                margin-bottom: 10px;
                &:hover {
                    background: #ddd;
                }
                &.acitve {
                    color: #459ffd;
                }
            }
        }
    }
}
</style>